import React from 'react';
import {
    Platform,
    SafeAreaView,
    NativeModules,
    StatusBar,
    View,
} from 'react-native';
import {connect} from 'react-redux'

const {StatusBarManager} = NativeModules;

let height = 0;
if (Platform.OS === 'ios') {
    StatusBarManager.getHeight(h => (height = h));
} else {
    height = StatusBar.currentHeight;
}

const  SafeAreaViewPlus =  props => {
    let app = props.app;
    return (
        <View style={[{backgroundColor: app.backgroundColor, height: '100%'}]}>
            <StatusBar barStyle={props.barStyle || 'dark-content'} translucent={true} backgroundColor={'transparent'}/>
            <SafeAreaView style={{paddingTop: height}}>{props.children}</SafeAreaView>
        </View>
    )
}

export default connect(({app}) => ({app}))(SafeAreaViewPlus)
